<template>
  <div class="order-unit">
    <div class="top">
      <span class="title">{{!orderInfo.paymoney?'推荐好友成为买手奖励':orderInfo.name}}</span>
      <span v-if="orderInfo.status!==2">+ ¥{{orderInfo.withdraw}}</span>
      <span v-if="orderInfo.status===2">- ¥{{-(orderInfo.withdraw)}}</span>
    </div>
    <div class="bottom">
      <div class="info">
        <span>{{orderInfo.confirmTime}}</span>
        <span v-if="!orderInfo.paymoney">{{orderInfo.mobile}}</span>
        <span v-else>付款金额：¥{{orderInfo.paymoney}}</span>
      </div>
      <div v-if="!isorder">
        <span class="status" v-if="orderInfo.brokeragestatus===0">待生效</span>
        <span class="status" v-if="orderInfo.brokeragestatus===1">待结算</span>
        <span class="status" v-if="orderInfo.brokeragestatus===2">售后退款</span>
        <span class="status" v-if="orderInfo.brokeragestatus===3">已结算</span>
      </div>

      <div v-else>
        <span class="status" v-if="orderInfo.status===0">待生效</span>
        <span class="status" v-if="orderInfo.status===1">待结算</span>
        <span class="status" v-if="orderInfo.status===2">售后退款</span>
        <span class="status" v-if="orderInfo.status===3">已结算</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    orderInfo: { type: Object },
    isorder: { type: Boolean, default: false }
  }
};
</script>
<style lang='scss' scoped>
.order-unit {
  height: auto;
  width: 100%;
  padding: 0 3.2vw;
  overflow: hidden;
  border-bottom: 1px solid #f2f2f2;
}
.top {
  color: rgb(51, 51, 51);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-top: 4vw;
}
.bottom {
  color: rgb(102, 102, 102);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}
.info > span {
  padding-right: 2vw;
}
.title {
  flex: 0 1 74vw;
  overflow: hidden;
  text-overflow:ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
</style>


